-<template>
  <view>
    <view class="content">
      <u-cell-group>
        <u-cell-item hover-class="none">
          <view class="value" @click="MyOrder">全部订单</view>
        </u-cell-item>
      </u-cell-group>
      <view class="list">
        <view class="list-item">
          <view class="list-item__container container--right">
            <view class="list-item__header">
              <view class="list-item__icon">
                <view class="list-item__icon-img">
                  <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
                </view>
              </view>
            </view>
            <view class="list-item__content">
              <text class="list-item__content-title u-line-1">活动商品软件服务\信息技术开发</text>
              <text class="list-item__content-note">已选择:规格1/规格3</text>
              <text class="list-item__content-note">数量：2</text>
              <text class="list-item__content-note">价格：98.00*2</text>
            </view>
          </view>
        </view>
      </view>
      <u-line color="#e4e7ed" />
      <view class="status">
        <view class="status-title">订单状态</view>
        <view class="steps">
          <view class="steps__item steps__item--row">
            <view class="steps__item__dot">
              <text class="iconfont icon-weifukuan steps__item__dot" :class="state == 0 ? 'steps__active':''"></text>
            </view>
            <text class="u-line-1 steps__item__text--row" :class="state == 0 ? 'steps__active':''">未付款</text>
            <view class="steps__item__line">
              <view class="line" :class="state == 0 || state == 1 ? 'line__active':''"></view>
            </view>
          </view>
          <view class="steps__item steps__item--row">
            <view class="steps__item__dot">
              <text class="iconfont icon-beizhu steps__item__dot" :class="state == 1 ? 'steps__active':''"></text>
            </view>
            <text class="u-line-1 steps__item__text--row" :class="state == 1 ? 'steps__active':''">已下单</text>
            <view class="steps__item__line">
              <view class="line" :class="state == 1 || state == 2 ? 'line__active':''"></view>
            </view>
          </view>
          <view class="steps__item steps__item--row">
            <view class="steps__item__dot">
              <text class="iconfont icon-yifahuo steps__item__dot" :class="state == 2 ? 'steps__active':''"></text>
            </view>
            <text class="u-line-1 steps__item__text--row" :class="state == 2 ? 'steps__active':''">已发货</text>
          </view>
        </view>
        <u-line color="#e4e7ed" />
        <view class="cell">
          <view class="cell_title">单号</view>
          <view class="cell_title u-text-center u-flex-1">顺丰快递</view>
          <view class="cell__value">2023090203010302031032030</view>
        </view>
      </view>
    </view>
    <view style="height: 100rpx;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        titleStyle:{color:'#3b4144'},
        state:2
      }
    },
    mounted() {
    
    },
    onLoad(options) {
      
    },
    methods: {
      MyOrder(){
        uni.navigateTo({
        	url: '/pages/Index/MyOrder/MyOrder'
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 100%;
  }
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    .list{
      background-color: #fff;
      .list-item{
        display: flex;
        font-size: 32rpx;
        position: relative;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        cursor: pointer;
        padding: 48rpx 32rpx;
        .list-item__container{
          position: relative;
          display: flex;
          flex-direction: row;
          flex: 1;
          overflow: hidden;
          .list-item__header {
            display: flex;
            flex-direction: row;
            align-items: center;
            .list-item__icon{
              margin-right: 18rpx;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              .list-item__icon-img{
                display: block;
                height: 128rpx;
                width: 128rpx;
                margin-right: 20rpx;
                border-radius: 16rpx;
                overflow: hidden;
              }
            }
          }
          .list-item__content{
            display: flex;
            padding-right: 16rpx;
            flex: 1;
            color: #3b4144;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            .list-item__content-title{
              font-size: 28rpx;
              color: #3b4144;
              overflow: hidden;
            }
            .list-item__content-note{
              margin-top: 6rpx;
              font-size: 24rpx;
              overflow: hidden;
            }
          }
          .list-item__content--center{
            justify-content: center;
          }
        }
      } 
    }
    .value{
      color: #3b4144;
    }
    .status{
      background-color: #fff;
      .status-title{
        padding: 32rpx;
      }
      .steps{
        display: flex;
        flex-direction: row;
        margin-top: 32rpx;
        margin-bottom: 48rpx;
        .steps__item{
          flex: 1;
          text-align: center;
          position: relative;
          min-width: 82rpx;
          font-size: 24rpx;
          display: flex;
          flex-direction: row;
          justify-content: center;
          flex-direction: column;
          align-items: center;
        }
        .steps__item--row{
            display: flex;
            flex-direction: row;
            flex-direction: column;
        }
        .steps__item__dot{
          width: 64rpx;
          height: 64rpx;
          font-size: 64rpx;
          display: flex;
          flex-direction: row;
          border-radius: 50%;
        }
        .steps__item__text--row{
            margin-top: 32rpx;
        }
        .steps__item__line{
          position: absolute;
          z-index: 0;
          left: 75%;
          width: 50%;
        }
        .steps__item__line--dot{
          top: calc(8px / 2);
        }
        .line{
          vertical-align: middle;
          margin: 0px;
          border-bottom: 2rpx dashed rgb(144, 147, 153);
          width: 100%;
          border-top-color: rgb(144, 147, 153);
          border-right-color: rgb(144, 147, 153);
          border-left-color: rgb(144, 147, 153);
        }
        .steps__active{
          color: $supernut-color;
        }
        .line__active{
          border-bottom: 1px dashed $supernut-color;
          border-top-color: $supernut-color;
          border-right-color: $supernut-color;
          border-left-color: $supernut-color;
        }
      }
      .cell{
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 26rpx 32rpx;
        font-size: 28rpx;
        line-height: 54rpx;
        background-color: #fff;
        text-align: left;
        .cell_title{
          font-size: 24rpx;
        }
        .cell__value{
          overflow: hidden;
          text-align: right;
          vertical-align: middle;
          font-size: 24rpx;
          flex: 2;
        }
      }
    }
  }
  
</style>